<template>
  <!-- 文件校验通过 -->
  <div class="validate-box">
    <div class="file-status">
      <template v-if="isFileOk">
        <i class="icon aufontAll h-icon-all-check-circle file-status-icon"></i>
        <span class="file-status-txt">{{ $t('languages.Apps.DocumentChecked') }}</span>
      </template>

      <!-- 文件错误，如非法文件等 -->
      <template v-else>
        <i class="icon aufontAll h-icon-all-close-circle file-status-icon error"></i>
        <span class="file-status-txt">{{ fileErrMsg }}</span>
      </template>
    </div>

    <template v-if="isFileOk && fileInvalid">
      <template v-if="isCodeRepeat  && !overrideForImport">
        <template v-if="!isModelCodeList">
          <div class="file-check-status">
            <span>{{ coreRepeatErrMsg }}</span>

            <span v-if="codeRepeatObj.modelCodeRepeat && !codeRepeatObj.bothRepeat && !!modelPos" class="model-position">模型位置: {{ modelPos }}</span>

            <span v-if="codeRepeatObj.modelCodeRepeat && !codeRepeatObj.bothRepeat && !!subTableErr" class="model-position">{{ subTableErr }}</span>
          </div>
        </template>
        <template v-else>
          <div class="file-check-status">
            <p class="isModelCodeList">1. 模型编码已存在<br>
              <span v-if="codeRepeatObj.modelCodeRepeat && !codeRepeatObj.bothRepeat && !!modelPos" class="model-position">模型位置: {{ modelPos }},请修改编码</span>
              <span v-if="codeRepeatObj.modelCodeRepeat && !codeRepeatObj.bothRepeat && !!subTableErr2" class="model-position">{{ subTableErr2 }}</span>
            </p>
            <br>
            <p>2. 修改编码再导入，将会生成新的业务模型。</p>
          </div>
        </template>

        <div class="status-tip" v-if="!isModelCodeList">
          <p>1. 覆盖后，当前导入业务模型里的数据模型会替换掉现在系统中对应业务模型的数据模型、编码重复的表单和流程；</p>
          <p>2. 修改编码再导入，将会生成新的业务模型。</p>
        </div>
      </template>

      <!-- 异常明细 -->
      <template v-else>
        <div class="file-check-status">
          <span>
            检测到应用有多条对象不存在，应用导入后请重新配置。
            <a
              href="javascript:;"
              class="link"
              @click="showErrorDetail"
            >查看明细</a>
          </span>
        </div>
      </template>
    </template>

    <div class="update-code-box" v-if="isShowErrorDetail">
      <errorDetail :errDetails="errDetails" />
    </div>
  </div>
</template>
<script lang="ts">

import { Component, Prop, Vue } from "vue-property-decorator";
import errorDetail from './error-detail.vue';

@Component({
  name: "ErrorMessage",
  components: {
    errorDetail,
  }
})

export default class ErrorMessage extends Vue {
  @Prop() isFileOk!: boolean;
  @Prop() fileInvalid!: boolean;
  @Prop() isCodeRepeat!: boolean;
  @Prop() isShowErrorDetail!: boolean;
  @Prop() isModelCodeList!: boolean;
  @Prop() coreRepeatErrMsg!: string;
  @Prop() codeRepeatObj!: any;
  @Prop() modelPos!: any;
  @Prop() subTableErr!: any;
  @Prop() subTableErr2!: any;
  @Prop() errDetails!: any;
  @Prop() fileErrMsg!: any;
  @Prop() overrideForImport!: any;

  // 展示错误明细
  showErrorDetail() {
    this.$emit('showErrorDetail')
  }

  // 关闭错误明细
  closeErrorDetail(){
    this.$emit('closeErrorDetail')
  }
}
</script>

<style lang="less">
@import './css/file-validate.less';
</style>